<template>
  <div class="login-container">
    <div class="login-box">
      <div class="brand-info">
        <h2 class="brand-title">酷猪云收银系统</h2>
        <p class="brand-intro">开店必备！近乎全能的门店管理系统</p>
        <p class="brand-intro">从收银、门店运营、供应链、会员营销到线上商城，都可以用酷猪云一套系统全实现。</p>
        <img src="../../assets/img/login_women.png" />
      </div>
      <div class="login-main">
        <el-tabs>
          <el-tab-pane label="门店用户登录">
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
              >
              <el-form-item prop="storeCode">
                <el-input v-model="dataForm.storeCode" class="login_input" placeholder="门店代码" prefix-icon="el-icon-location-outline" >
                </el-input>
              </el-form-item>
              <el-form-item prop="userName">
                <el-input v-model="dataForm.userName" clearable class="login_input" placeholder="帐号" prefix-icon="el-icon-user">
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="dataForm.password" clearable class="login_input"  :type="inputType" placeholder="密码" prefix-icon="el-icon-lock">
                 <i slot="suffix":class="[this.pwdFlag?'iconfont icon-jurassic_openeyes':'iconfont icon-biyan']"
                    style="margin-top:8px;font-size:18px;" @click="showHidePassword()" />
                </el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <el-input v-model="dataForm.captcha" clearable placeholder="验证码" prefix-icon="el-icon-orange">
                    </el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                  </el-col>
                </el-row>
              </el-form-item>
              <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
              <el-form-item>
                <el-button class="login-btn-submit" icon="el-icon-position" type="primary" @click="dataFormSubmit()">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- <el-tab-pane label="管理员登录">
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
              status-icon>
              <el-form-item prop="userName">
                <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <el-input v-model="dataForm.captcha" placeholder="验证码">
                    </el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUUID} from '@/utils'
  // import {setCookie, getCookie, clearCookie} from '@/utils/myUtil'

  export default {
    data() {
      return {
        dataForm: {
          storeCode: '',
          userName: '',
          password: '',
          uuid: '',
          captcha: '',
        },
        pwdFlag: false,
        inputType:'password',
        logining: false,
        checked: true,
        dataRule: {
          userName: [{
            required: true,
            message: '帐号不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
          captcha: [{
            required: false,
            message: '验证码不能为空',
            trigger: 'blur'
          }]
        },
        captchaPath: ''
      }
    },
    created() {
      this.getCaptcha()
      this.account()  //获取cookie的方法
    },
    methods: {
      // 提交表单
       dataFormSubmit() {
        this.$refs['dataForm'].validate( async valid => {
          if (valid) {
            let adornData = this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            let {data} = await this.$http({
                url: '/sys/login',
                method: 'post',
                data: adornData
             })
             if(this.checked == true){
                  //存入cookie
                 this.$cookie.set("userName", this.dataForm.userName, 7)  //保存7天
                 this.$cookie.set("password", this.dataForm.password, 7)  //保存7天
                 this.$cookie.set("storeCode", this.dataForm.storeCode, 7)  //保存7天
             }else{
                 this.$cookie.set("userName","",-1)  //清除cookie
                 this.$cookie.set("password","",-1)  //清除cookie
                 this.$cookie.set("storeCode","",-1)  //清除cookie
             }

            if (data && data.code === 0) {
              this.$cookie.set('token', data.token)
              this.$router.replace({
                name: 'home'
              })
            } else {
              this.getCaptcha()
              this.$message.error(data.msg)
            }

          }
        })
      },
      // 获取验证码
      getCaptcha() {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      },
      account(){
          if(document.cookie.length >= 0){
               this.dataForm.userName = this.$cookie.get('username')
               this.dataForm.password = this.$cookie.get('password')
               this.dataForm.storeCode = this.$cookie.get('storeCode')
          }
       },
      showHidePassword(){
        this.pwdFlag = !this.pwdFlag
        this.inputType = this.pwdFlag ? 'text' : 'password'//text为显示密码；password为隐藏密码
      }
    }
  }
</script>

<style scoped>
  .el-tabs__item {
    font-size: 18px!important;
  }
  .el-input--medium .el-input__inner {
    height: 43px!important;
    line-height: 43px!important;
  }

</style>

<style lang="scss" scoped>
  .login-container {
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    .login-box {
      display: flex;
      width: 750px;
      height: 400px;
      border-radius: 3px;
      position: absolute;
      overflow: hidden;
      top: 20%;
      left: 30%;
      z-index: 900;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 1px 1px 5px 2px #c4e2dd;
      // transform: translate(-25%, -25%);
    }

    .brand-info {
      padding: 35px;
      color: #fff;
      background-color: #22d594;

      .brand-title {
        margin: 0 0 22px 0;
        font-size: 38px;
        font-weight: 400;
        text-transform: uppercase;

        img {
          width: 50px;
          height: 40px;
        }
      }

      .brand-intro {
        margin: 10px 0;
        font-size: 16px;
        line-height: 1.58;
        opacity: .6;
      }

      img {
        width: 300px;
      }
    }

    .login-main {
      padding: 15px 30px 20px 30px;
      width: 630px;
      min-height: 100%;
      margin-left: 20px;

      .el-form {
        margin-top: 20px;
      }

      .login-title {
        font-size: 16px;
      }

      .login-captcha {
        overflow: hidden;
        >img {
          width: 100%;
          cursor: pointer;
        }
      }

      .login-btn-submit {
        width: 100%;
        margin-top: 0px;
        height: 40px;
        border-radius: 25px;
      }
    }
  }

</style>
